<template>
  <div class="goodsList">
    <van-nav-bar
      :title="lists.class_name"
      left-arrow
      :fixed="true"
      @click-left="$router.back()"
    />
    <div class="content">
      <div class="search" @click="$router.push('/search')">
        <div class="inner">
          <span>请输入关键字搜索</span>
          <img src="https://shqchapp.com/h5/static/image/zoom.png" alt="" />
        </div>
      </div>
      <van-sticky :offset-top="46">
        <div class="select">
          <div @click="getList('sort asc')">综合</div>
          <div @click="getpriceList">价格</div>
          <div @click="getsxList">销量</div>
          <div>
            <i
              class="switch-icon"
              :class="{ changeImage: cell }"
              @click="cell = !cell"
            ></i>
          </div>
          <!-- 筛选 -->
          <div>
            <van-dropdown-menu>
              <van-dropdown-item title="筛选" ref="item">
                <van-cell center title="价格区间">
                  <div class="input">
                    <input type="text" v-model="price.l" />----
                    <input type="text" v-model="price.r" />
                  </div>
                </van-cell>
                <van-cell center title="分类">
                  <div>{{ lists.class_name }}</div>
                </van-cell>
                <div style="padding: 5px 16px">
                  <van-button type="danger" block round @click="onConfirm">
                    确认
                  </van-button>
                </div>
              </van-dropdown-item>
            </van-dropdown-menu>
          </div>
        </div>
      </van-sticky>
      <div class="list" :class="{ cell: cell }" v-if="lists.list">
        <div
          class="item"
          v-for="list in lists.list"
          :key="list.id"
          @click="$router.push('/detail/' + list.id)"
        >
          <div class="img">
            <img :src="list.image_url" alt="" />
          </div>
          <div class="des">
            <div class="name">{{ list.name }}</div>
            <div class="costprice">￥{{ list.costprice }}</div>
          </div>
        </div>
        <!-- dd -->
        <div class="item" v-for="list in lists.list" :key="list.id">
          <div class="img">
            <img :src="list.image_url" alt="" />
          </div>
          <div class="des">
            <div class="name">{{ list.name }}</div>
            <div class="costprice">￥{{ list.costprice }}</div>
          </div>
        </div>
        <!-- dd -->
      </div>
    </div>
  </div>
</template>
<script>
import { getHome } from "@/api/home";
import { ref } from "vue";
export default {
  setup() {
    const item = ref(null);

    const price = ref({
      l: 0,
      r: 0,
    });
    const switch1 = ref(false);
    const switch2 = ref(false);
    const onConfirm = () => {
      if (price.value.l != 0 || price.value.r != 0) {
        getHome(
          {
            where:
              "{'cat_id':10,'brand_id':'','label_id':'','price_f':" +
              price.value.l +
              ",'price_t':" +
              price.value.r +
              "}",
            limit: 10,
            method: "goods.getlist",
            order: "sort asc",
          },
          { loading: { message: "加载中" } }
        );
      }
      item.value.toggle();
    };

    return {
      item,
      switch1,
      switch2,
      onConfirm,
      price,
    };
  },

  name: "goodsList",
  data() {
    return {
      lists: {},
      cell: false, //列数控制
      off: true,
      xiaoshou: true,
    };
  },
  created() {
    this.getList();
  },
  beforeUpdate() {
    // this.getList();
  },
  methods: {
    getpriceList() {
      if (this.off) {
        this.getList("price asc,sort asc");
        this.off = !this.off;
      } else {
        this.getList("price desc,sort asc");
        this.off = !this.off;
      }
    },
    getsxList() {
      if (this.xiaoshou) {
        this.getList("buy_count desc,sort asc");
        this.xiaoshou = !this.xiaoshou;
      } else {
        this.getList("buy_count asc,sort asc");
        this.xiaoshou = !this.xiaoshou;
      }
    },
    getList(order = "sort asc") {
      getHome(
        {
          limit: 10,
          method: "goods.getlist",
          order: order,
          page: 1,
          where: '{"cat_id":' + this.$route.params.id + "}",
        },
        {
          loading: { message: "加载中" },
        }
      ).then((res) => {
        this.lists = res.data.data;
      });
    },
  },
};
</script>
<style scoped>
.van-nav-bar {
  font-weight: 700;
}
.goodsList {
  bottom: 0;
}
.goodsList .content {
  position: absolute;
  top: 0.92rem;
  left: 0;
  bottom: 0;
  right: 0;
}
.content .search {
  padding: 0.16rem 0.26rem;
  color: #888;
  font-size: 0.24rem;
  line-height: 0.72rem;
}
.content .search .inner {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.5rem;
  background-color: #e9e9e9;
  padding: 0 0.3rem;
}
.content .search .inner img {
  width: 0.5rem;
  height: 0.5rem;
}
.content .select {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 0.1rem 0.26rem 0.2rem;
  background-color: #fff;
}
.content .select > div {
  width: 20%;
  font-size: 0.24rem;
  color: #333;
}
.content .select .switch-icon {
  display: block;
  width: 0.44rem;
  margin: 0 auto;
  height: 0.44rem;
  background-image: url("@/assets/images/switch-ic-side-2.png");
  background-position: 0% 0%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: all 0.5s;
}
.content .select .changeImage {
  background-image: url("@/assets/images/switch-ic-list.png");
}
.content .list {
  display: flex;
  flex-wrap: wrap;
  padding: 0.1rem;
  overflow-y: auto;
}

.content .list .item {
  width: 50%;
  padding: 0.1rem;
}
.content .list .item .img {
  width: 3.36rem;
  height: 3.36rem;

  position: relative;
  overflow: hidden;
}
.content .list .item .img img {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.content .list .des {
  padding: 0.1rem;
}
.content .list .des .name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  color: #333;
  width: 100%;
  font-size: 0.26rem;
}
.content .list .des .costprice {
  color: #ff7159 !important;
  line-height: 0.64rem;
  position: relative;
}
.content .list .des .costprice::after {
  content: "";
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  background-image: url("@/assets/images/ic-car.png");
  background-position: 0% 0%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  bottom: 0;
}

/* cell 单行样式 */
.content .cell {
  display: block;
}
.content .cell .item {
  width: 100%;
  display: flex;
  margin-bottom: 0.3rem;
}
.content .cell .item .img {
  width: 2.5rem;
  height: 2.5rem;
}
.content .cell .item .des {
  width: 4.1rem;
  margin-left: 0.1rem;
}
.content .cell .item .des .costprice {
  font-size: 0.4rem;
}

.input {
  display: flex;
  justify-content: space-between;
}
.input input {
  width: 1.4rem;
  height: 0.5rem;
  background-color: #888;
  color: #fff;
  border: none;
  outline: none;
}
</style>